.dropdown {
  @apply relative cursor-pointer;
}

.dropdown .dropdown__control {
  @apply relative flex w-full cursor-pointer items-center rounded border border-gray-200 bg-transparent bg-white p-0.5 text-left text-sm focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 system:border-blue-700 system:bg-blue-900 system:text-blue-300;
}

.dropdown__control--is-focused,
.dropdown__control--menu-is-open {
  @apply dark:border-gray-300 dark:shadow-none dark:hover:border-gray-300 system:border-blue-300 system:shadow-none system:hover:border-blue-300;
}

.dropdown .dropdown__single-value {
  @apply text-gray-500 dark:text-gray-300;
}

.dropdown__value-container {
  @apply block min-w-0 flex-1 truncate;
}

.dropdown__dropdown-indicator svg {
  @apply h-5 w-5 text-gray-400;
}

.dropdown__indicator-separator {
  @apply hidden;
}

.dropdown__input-container {
  @apply m-0;
}

.dropdown .dropdown__menu {
  @apply absolute max-h-80 w-full overflow-y-auto rounded-b  border border-gray-200 bg-white text-sm text-gray-500 dark:border-gray-stroke dark:bg-gray-900 dark:text-gray-300;
  z-index: 1000;
}

.dropdown .dropdown__option {
  @apply relative flex cursor-pointer select-none items-center px-3 py-2 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-elevation-2 system:text-blue-300 system:hover:bg-elevation-2;
}

.dropdown__option > span {
  @apply block flex-grow truncate;
}

.dropdown__option svg.selected {
  @apply h-3.5 w-3.5;
}

.dropdown__option--is-selected {
  @apply font-bold dark:bg-elevation-1;
}

.dropdown__option--is-focused {
  @apply bg-transparent;
}

.dropdown.chain .dropdown__control {
  @apply dark:hover:bg-elevation-2;
}

.dropdown.chain .dropdown__single-value {
  @apply flex w-full flex-grow items-center text-sm font-medium;
}

.dropdown.chain .dropdown__single-value:before {
  content: '';
  @apply mr-2 block h-1.5 w-1.5 rounded-full;
}

.dropdown.chain.isConnected .dropdown__single-value:before {
  @apply bg-green-400;
}

.dropdown.chain.isConnecting .dropdown__single-value:before {
  @apply bg-yellow-300;
}

.dropdown.chain.isError .dropdown__single-value:before {
  @apply bg-red-400;
}

.account-select .dropdown__control {
  min-height: 68px;
}

.dropdown .dropdown__control .font-mono,
.dropdown .dropdown__menu .font-mono,
.dropdown.chain .dropdown__single-value .font-mono {
  @apply text-xs;
}
